

<template>
  <div class="homeTop">
    <div class="container">
      <!-- 图标 -->
      <div class="ekelogo" @click="goHome">
        <img src="../assets/images/FrameBlue.png" alt="" />
      </div>

      <div style="display: flex" v-if="isFlag">
        <!-- <div
          class="shouye"
          :class="isShowOpen == 1 ? 'shouye' : 'onshouye'"
          @click="onEnterpriseHome(1)"
        >
          首页
        </div>
        <div
          class="yhdating"
          :class="isShowOpen == 2 ? '  onyhdating ' : 'yhdating'"
          @click="onEnterbarterHall(2)"
        >
          易货大厅
        </div>
        <div
          class="qyzhongxin"
          :class="isShowOpen == 3 ? '  onqyzhongxin' : 'qyzhongxin'"
          @click="onEnterpriseCenter(3)"
        >
          企业中心
        </div> -->
        <div v-for="(item, index) in homeTittle" :key="index">
          <div
            class="tittletype"
            :class="item.path == currentPath ? 'ontittletype' : 'tittletype'"
            @click="tittleChoose(item)"
          >
            {{ item.tittle }}
          </div>
        </div>
        <div v-if="flag == false">
          <el-button
            style="
              border-radius: 31px 31px 31px 31px;
              opacity: 1;
              border: 2px solid #e6e6e6;
            "
            @click="handleSetValue"
            >登录</el-button
          >
        </div>
        <div class="tittle" v-else>
          <el-dropdown class="el_dropdown" style="border: none; outline: none">
            <div
              class="el-dropdown-link el_dropdown_link"
              style="border: none; outline: none"
            >
              {{ componyTittle }}
            </div>
            <template #dropdown>
              <el-dropdown-menu class="" style="width: 155px">
                <el-dropdown-item>我的消息</el-dropdown-item>
                <el-dropdown-item @click="onEnterpriseCenter"
                  >企业中心</el-dropdown-item
                >
                <el-dropdown-item @click="loginOut">退出账号</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 退出账户 -->
    <el-dialog
      v-model="centerDialogVisible"
      width="30%"
      align-center
      :show-close="false"
      center
      class="el-dialog"
      style="border-radius: 16px 16px 16px 16px"
    >
      <div class="textContent">
        <div class="textContent_zhuce">是否退出账号</div>
        <!-- <div class="textContent_time">您已注册过易可易</div> -->
      </div>
      <template #footer>
        <span
          class="dialog-footer"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-button
            class="el_button1"
            style=""
            @click="centerDialogVisible = false"
          >
            取消
          </el-button>
          <el-button class="el_button2" style="" @click="loginOutBtn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  <script setup>
import { getToken, removeToken } from "@/utils/auth";
import { onMounted, ref, watch } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { Logout } from "../api/login";
import { ElMessage } from "element-plus";
import { getUserInfo, removeUserInfo } from "@/service";
const router = useRouter();
const centerDialogVisible = ref(false);
defineProps({
  fatherMessage: String,
});
// 默认首页蓝色
const isSY = ref(1);
const isYH = ref(1);
const isQY = ref(1);
const isShowOpen = ref(1);

const isFlag = ref(true);
const currentPath = ref();
watch(
  () => router.currentRoute.value,
  (newValue) => {
    if (newValue.meta.tabs == 1) {
      isFlag.value = false;
    } else {
      isFlag.value = true;
    }
  },
  { immediate: true, deep: true }
);

const count = ref(0);
const msg = ref();
const flag = ref(false);
const componyTittle = ref("");

onMounted(() => {
  const userInfo = getUserInfo();
  console.log("ssdd", userInfo.token);

  if (userInfo.token) {
    flag.value = true;
    // const componyInfo = localStorage.getItem("componyInfo");
    // //将变量接过来
    // let ComponyInfo = JSON.parse(componyInfo); //商家具体信息
    // componyTittle.value = userInfo.realname;
    componyTittle.value = userInfo.company.name;
  }
  // 生命周期
  currentPath.value = router.currentRoute.value.path;
});
const handleSetValue = () => {
  // flag.value = 2;
  // msg.value = "杭州易可易科技有限责任公司";
  router.push("/login");
};
// 企业中心
const onEnterpriseCenter = () => {
  router.push("/enterprise-center");
};
//退出账户
const loginOut = () => {
  // centerDialogVisible.value = true;
  centerDialogVisible.value = true;

  // removeToken();
  // router.push("/login");
};
//确认退出
const loginOutBtn = () => {
  Logout()
    .then((res) => {
      if (res.code == 1) {
        centerDialogVisible.value = true;
        ElMessage({ message: res.msg, type: "success" });
        removeUserInfo();
        // localStorage.removeItem("componyInfo");
        router.push("/login");
      } else {
        ElMessage({ message: res.msg, type: "success" });
      }
    })
    .catch((err) => {});
  // centerDialogVisible.value = false;
};
//首页

const homeTittle = ref([
  { tittle: "首页", id: 1, path: "/home" },
  { tittle: "易货大厅", id: 2, path: "/barter-hall" },
  { tittle: "企业中心", id: 3, path: "/enterprise-center" },
]);
const val = ref(0);
const tittleChoose = (item) => {
  currentPath.value = item.path;
  router.push(item.path);
};

// const onEnterpriseHome = (val) => {
//   // isSY.value = 1;
//   // isYH.value = 1;
//   // isQY.value = 1;
//   isShowOpen.value = val;

//   console.log("111", 111);
//   console.log("token", getToken());
// };
// // 企业中心
// const onEnterpriseCenter = (val) => {
//   isShowOpen.value = val;

//   console.log("111", 333);
//   router.push("/enterprise-center");
// };
// //易货大厅
// const onEnterbarterHall = (val) => {
//   isShowOpen.value = val;

//   console.log("111", 222);
//   router.push("/barter-hall");
// };
// 去首页
const goHome = () => {
  router.push("/home");
};
</script>
  
  <style scoped lang="less">
.tittletype {
  width: 90px;
  text-align: center;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
}
.ontittletype {
  font-weight: bold;
  color: #2487e8;
  cursor: pointer;
}
.el-dialog {
  border-radius: 16px;
}
:deep(.el-drawer:focus) {
  outline: none;
}
:deep(.el-drawer__header span:focus) {
  outline: none;
}
:deep(.el-drawer__close-btn:focus) {
  outline: none;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  width: 155px;
  // border: 1px solid red;
}
.read-the-docs {
  color: #888;
}
.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.homeTop {
  height: 88px;
  line-height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  position: relative;
  // margin-left: 32px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
  // border: 1px solid red;
  box-sizing: border-box;

  background-color: #fff;
  width: 100%;
  .ekelogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    //   line-height: 88px;
    height: 88px;
    img {
    }
  }

  .shouye {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #2487e8;
    cursor: pointer;
  }
  .onshouye {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
  }
  .yhdating {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;

    color: #000000;
    cursor: pointer;
  }
  .onyhdating {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: bold;

    color: #2487e8;
    cursor: pointer;
  }
  .qyzhongxin {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
  }
  .onqyzhongxin {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: bold;
    color: #2487e8;
    cursor: pointer;
  }
  .tittle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 155px;
    color: #000000;
    .el_dropdown {
      line-height: 88px;
      border: none;
      .el_dropdown_link {
        color: #000000;
        width: 155px;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        border: none;

        //   border: 1px solid red;
      }
    }
  }
  .textContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .textContent_zhuce {
      height: 48px;
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #141416;
      line-height: 48px;
    }
    .textContent_time {
      height: 48px;
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #141416;
      line-height: 48px;
    }
    .el_button {
      width: 352px;
      height: 48px;
      background: #2487e8;
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
    }
  }
  .dialog-footer {
    :deep(.el_button1) {
      width: 168px;
      height: 48px;
      background: rgba(0, 82, 217, 0.12);
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #2487e8;
    }
    :deep(.el_button2) {
      width: 168px;
      height: 48px;
      background: #2487e8;
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #fcfcfd;
    }
  }
}
</style>
  